<template>
    <div class="article-detail-page">
        <TitleBar :title="title" />

        <ShellInfo v-if="shellInfo.shuId" :shell="shellInfo" />

        <RichContent v-if="article.content" :content="article.content" />

        <UserAction v-if="article._id" :article="article" />

        <RelevantInfo :list="pageData.relevantInfor.list" />
    </div>
</template>

<script>
import RichContent from "./components/richContent/index";
import TitleBar from "./components/titleBar/index";
import RelevantInfo from "@/pages/article/components/relevantInfo/index";
import UserAction from "./components/userAction/index";
import ShellInfo from "./components/shellInfo/index";

import axios from "axios";
import config from "@/config/index";
import mixinArticle from "./mixin/article";

export default {
    components: {
        TitleBar,
        ShellInfo,
        RelevantInfo,
        UserAction,
        RichContent
    },
    mixins: [mixinArticle],
    data() {
        return {
            shellInfo: {},
            article: {
                title: ""
            },
            title: "",
            content: "",
            isCollect: true,
            pageData: {
                relevantInfor: {
                    list: [
                        {
                            text: "鹦鹉螺 神奇美丽能否永恒 ．人民网",
                            url:
                                "https://baike.baidu.com/reference/207068/bb92g-qC-CzcOkmmfuUVb1DXKpyji3cyGBzSyNxxVOpRbLBq1ANvt7h4bSm9i_M8i6CgFGmzXqr1cBKINljeWac-lyopVrB-mUGRWSkDQlqMUg"
                        },
                        {
                            text: "鹦鹉螺 神奇美丽能否永恒 ．人民网",
                            url:
                                "https://baike.baidu.com/reference/207068/bd307hotU7NrOBlu9-gUXKXormf2UIX_HDqhEekg-lO9gfxJ9Qy9gh1Qxf9mgqEkbU3-rpdo291RZe5kymY9MnIZVGTOWZAm2esRhmq_"
                        },
                        {
                            text:
                                "珍贵的活化石——鹦鹉螺 ．常州博物馆．2011-01-10",
                            url:
                                "https://baike.baidu.com/reference/207068/e788LwTc9krV2pTKE0XrVW-iKK1UecPeydw7KSIND226ZSZ_xC6bRlT8n8bX2CEwBp01UMrgXj39XUKohv4bQOdH6tVInmI1awVZQ36wt_XCxrjXo91OmUU-26OgwbM"
                        }
                    ]
                }
            }
        };
    },

    created() {
        this.$showLoading();
        this.getPageData();
        this.getShellDetail();
    },

    mounted() {
        const base = config.cmsApi;
        const docId = this.$route.query.docId;

        axios.get(`${base}/article`).then(res => {
            const articles = res.data.data;
            const article = articles.find(a => {
                return a._id === docId;
            });
            this.article = article;
            // this.title = article.title;
            this.$hideLoading();

            // 添加浏览记录
            this.$cloudApi.addUserHistory({
                data: {
                    type: "article",
                    detail: {
                        docId: docId,
                        item: this.article
                    },
                    path: this.$route.fullPath
                }
            });
            this.updateArticleViews(this.article._id);
        });
    },

    methods: {
        changeCategory(item) {
            const { id } = item;
            this.currentCategory = id;
        },

        getPageData() {
            const { docId } = this.$route.query;
        },

        getShellDetail() {
            const shellList = this.$store.state.shellList;
            const shuId = this.$route.query.shuId;
            const ganId = this.$route.query.ganId;
            if (!shuId || shellList.length === 0) {
                return;
            }
            const result = shellList.find(shell => {
                if (shell.shuId === shuId) {
                    return true;
                }
            });
            this.shellInfo = result;
            this.title = `${result.shuName} ${result.shuId}`;
            console.log("article-detail", this.$route.query, result);
        }
    }
};
</script>


<style lang="less">
.article-detail-page {
    font-size: 30px;
    font-weight: normal;
    width: 100vw;
    min-height: 100vh;
    background: #f5f5f5;
    box-sizing: border-box;
    padding-top: 90px;
    font-size: 28px;

    .detail {
        background: #fff;
        padding: 0 30px;
        box-sizing: border-box;
        width: 100vw;
        overflow-x: hidden;
    }

    .page-body {
        width: 100%;

        .block {
            padding: 0 30px 30px 30px;
            .title {
                font-weight: 600;
                font-size: 34px;
                padding: 30px 0;
            }
        }
    }
}
</style>